<template>
  <div id="shopcarmap">
    <Top></Top>
    <car></car>
    <router-view></router-view>
    <Ping></Ping>
    <div class="zhezhao" v-if="showzhe"></div>
    <div class="zhezhaocen" v-if="showzhe">
      <h3>使用平台支付</h3>
      <p class="zhezhaofont">请你在新打开得网上页面进行支付，支付完成前请不要关闭页面</p>
      <div class="zhezhaobtn">
        <p>已完成支付</p>
        <span>查看订单详情</span>
      </div>
      <div class="zhezhaobtn1">
        <p>取消支付</p>
        <span>更换支付方式</span>
      </div>
    </div>
  </div>
</template>
<script>
import Top from "@/components/top.vue";
import Ping from "@/components/pingpai.vue";
import car from "@/components/CarNav.vue";

export default {
  components: {
    Top,
    Ping,
    car
  },
  data() {
    return {
      showzhe: false,
     
    };
  }
};
</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
#shopcarmap {
  width: 100%;
  height: 100%;
  position: relative;
}
.zhezhao {
  width: 100%;
  height: 100%;
  background: #333;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.8;
}
.zhezhaocen {
  width: 30%;
  height: 300px;
  position: absolute;
  left: 37%;
  top: 20%;
  background: #fff;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.zhezhaocen h3 {
  width: 100%;
  line-height: 80px;
  color: #f08200;
}
.zhezhaofont {
  width: 100%;
}
.zhezhaobtn,
.zhezhaobtn1 {
  width: 30%;
  height: 45px;
  color: #fff;
  padding-top: 8px;
  line-height: 20px;
  font-size: 16px;
  background: #f08200;
}
.zhezhaobtn span,
.zhezhaobtn1 span {
  font-size: 14px;
}
.zhezhaobtn1 {
  background: #498e3d;
}
</style>